<template>
	<view class="session-cell" @tap.stop="onClickItem">
		<view class="session-thumb" v-if="type != 'groupChat'">
			<image class="session-thumb-image" mode="aspectFill" :src="cover"></image>
			<image class="session-thumb-vip" v-if="isVip && vipFile" :src="vipFile"></image>
		</view>
		<view class="session-thumb group-image" v-else><image class="group-image-item" :src="item.avatar" v-for="(item, index) in memberList" :key="index" /></view>
		<view class="session-content">
			<view class="session-content-top">
				<view class="session-content-main">{{ title }}</view>
				<view class="session-content-time">{{ timeShow || time }}</view>
			</view>
			<view class="session-content-bottom">
				<view class="session-content-text">{{ content }}</view>
				<!-- <bubble v-if="unread > 0" @remove="removeBride" :size="40" class="session-content-bubble" color="#f85962" :index="0">
					<view class="session-content-badge" slot="bubble">{{ unread }}</view>
				</bubble> -->
				<view class="session-content-bubble" v-if="unread > 0">
					<view class="session-content-badge">{{ unread }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import moment from '@/utils/Moment.js';
import { mapState } from 'vuex';
import Tools from '@/utils/Tools.js';

// import bubble from '@/components/bubble/index.vue';
// import Emotion from '@/utils/Emotion.js';

export default {
	props: {
		index: {
			type: Number,
			default: -1
		},
		type: {
			type: String,
			default: 'singleChat'
		},
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			actionShow: false,
			key: null,
			cover: '',
			title: '',
			time: null,
			content: '',
			unread: 0,
			memberList: [],
			isVip: false,
			vipFile: false
		};
	},
	watch: {
		item: {
			handler: function(newValue, oldValue) {
				if (Object.keys(newValue).length > 0) {
					this.initData();
				}
			},
			deep: true,
			immediate: true
		},
		type: function(newValue, oldValue) {
			this.initData();
		}
	},
	computed: {
		timeShow: function() {
			const msgDateMoment = moment(this.time * 1000);
			const todayMoment = moment();
			if (todayMoment.format('YYYY-MM-DD') == msgDateMoment.format('YYYY-MM-DD')) {
				return msgDateMoment.format('HH:mm:ss');
			} else if (todayMoment.year() == msgDateMoment.year()) {
				return msgDateMoment.format('MM-DD');
			} else {
				msgDateMoment.format('YYY-MM-DD');
			}
		},
		options: function() {
			const deleteOption = {
				text: '删除',
				mapping: 'deleteSession',
				style: {
					backgroundColor: '#dd524d'
				}
			};
			const readOption = {
				text: '已读',
				mapping: 'readSession',
				style: {
					backgroundColor: '#007aff'
				}
			};
			const options = [deleteOption];
			if (this.unread > 0) {
				options.unshift(readOption);
			}
			return options;
		}
	},
	mounted() {
		this.actionShow = false;
	},
	methods: {
		initData() {
			switch (this.type) {
				case 'singleChat':
					this.initSingleChatData();
					break;
				case 'groupChat':
					this.initGroupChatData();
					break;
				case 'officialNotice':
					this.initOfficialNoticeData();
					break;
				default:
					break;
			}
		},
		initSingleChatData() {
			this.cover = this.item.from_avatar;
			this.title = this.item.title;
			this.content = this.item.content;
			this.time = this.item.chat_time;
			this.unread = this.item.chat_unread;
			this.key = this.item.chat_user;
			this.isVip = this.item.is_vip;
			this.vipFile = this.item.vip_file;
		},
		initOfficialNoticeData() {
			this.cover = this.item.logo.file_path;
			this.title = this.item.name;
			this.content = this.item.last.length > 0 ? this.item.last[0].content : '';
			this.time = parseInt(moment(this.item.update_time, 'YYYY-MM-DD HH:mm:ss') / 1000);
			this.unread = this.item.unread_count;
			this.key = this.item.type_id;
		},
		initGroupChatData() {
			this.cover = this.item.from_avatar;
			this.title = this.item.title;
			this.content = this.item.content;
			this.time = parseInt(this.item.chat_time);
			this.unread = this.item.chat_unread;
			this.key = this.item.chat_user;
			this.memberList = this.item.group_member;
		},
		onClickItem() {
			this.$nextTick(() => {
				this.$emit('handle', { key: this.key });
			});
		}
	}
};
</script>

<style lang="scss">
.session-cell {
	width: 750rpx;
	padding: 16rpx 30rpx;
	display: flex;
	align-items: center;
	background-color: #fff;
	position: relative;
	&::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		left: 166rpx;
		height: 4rpx;
		bottom: 0;
		background-color: #f8f8f8;
	}
	.session-thumb {
		width: 110rpx;
		height: 110rpx;
		position: relative;
		margin-right: 24rpx;
		flex: 0 0 110rpx;
		.session-thumb-vip {
			position: absolute;
			bottom: 0;
			right: -10rpx;
			height: 45rpx;
			width: 45rpx;
		}
		.session-thumb-image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 55rpx;
		}
		&.group-image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 10rpx;
			padding: 3rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			background-color: #dbdfdd;
			.group-image-item {
				margin: 3rpx;
				width: 45rpx;
				height: 45rpx;
				flex-shrink: 0;
				border-radius: 6rpx;
			}
		}
	}

	.session-content {
		height: 110rpx;
		padding: 4rpx 0;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.session-content-top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.session-content-main {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				flex: 1;
				padding-right: 70rpx;
				@include ellipsis(1);
			}
			.session-content-time {
				margin-top: 4rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				width: 250rpx;
				flex-shrink: 0;
				text-align: right;
			}
		}
		.session-content-bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: relative;
			.session-content-text {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				flex: 1;
				padding-right: 40rpx;
				@include ellipsis(1);
			}
			.session-content-bubble {
				position: relative;
			}
			.session-content-badge {
				position: relative;
				min-width: 40rpx;
				height: 40rpx;
				padding: 0 10rpx;
				background: rgba(248, 89, 98, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				font-size: 22rpx;
				color: #fff;
			}
		}
	}
}
</style>
